PlayerDetail.renderPlayerGamesFull - Code Metrics - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

PlayerDetail.renderPlayerGamesFull B
last analyzed 2025-10-24 04:38 UTC

↳ Parent: PlayerDetail

Complexity

Conditions

Size

Total Lines	168
Code Lines	138

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	138
dl	0
loc	168
c	0
b	0
f	0
rs	7
cc	3

How to fix Long Method

import { StaticQuery, graphql } from "gatsby";
import { Link } from "gatsby";
import { getSrc } from "gatsby-plugin-image";
import moment from "moment";
import React, { Component, Fragment } from "react";

import Icon from "../components/Icon";
import RelatedNews from "../components/RelatedNews";
import iconCardRed from "../images/i_card_red.png";
import iconCardYellow from "../images/i_card_yellow.png";
import iconCleansheet from "../images/i_cleansheet.png";
import iconGoal from "../images/i_goal.png";
import { mapPositionCode } from "../scripts/helper";
import Card from "./Card";
import "./player.scss";

// eslint-disable-next-line
String.prototype.replaceAll = function (search, replacement) {
  // eslint-disable-next-line @typescript-eslint/no-this-alias
  var target = this;
  return target.replace(new RegExp(search, `g`), replacement);
};

/**
 */
class PlayerDetail extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      loading: true,
    };

    const {
      config: {
        site: {
          siteMetadata: { kcvvPsdApi },
        },
      },
      player: { field_vv_id: playerId },
    } = this.props;

    this.kcvvPsdApi = kcvvPsdApi;
    this.playerId = playerId;
  }

  updateData() {
    if (this.playerId === null) {
      return;
    }

    const apiUrl = `${this.kcvvPsdApi}/stats/player/${this.playerId}`;

    fetch(apiUrl)
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))
      .catch(() => this.setState({ data: {}, loading: false }));
  }

  componentDidMount() {
    this.updateData();
  }

  renderPlayerName = (player) => (
    <h1 className={`player-detail__name`}>
      <span className={`player-detail__name-first`}>
        {player.field_firstname}
      </span>
      <span className={`player-detail__name-last`}>
        {player.field_lastname}
      </span>
    </h1>
  );
  renderPlayerImage = (player) => (
    <div className={`bg-green-mask`}>
      <div
        className={`player-detail__bg-avatar`}
        style={
          player.relationships.field_image && {
            backgroundImage: `url(${getSrc(
              player.relationships.field_image.localFile.childImageSharp
                .gatsbyImageData,
            )})`,
          }
        }
      />
      <div className={`bg-white-end`} />
    </div>
  );
  renderPlayerHeader = (player) => (
    <header className={`player-detail__header`}>
      {this.renderPlayerName(player)}
      {this.renderPlayerImage(player)}

      <div className={`player-detail__bg-shirt-number`} aria-hidden="true">
        {player.field_shirtnumber || ``}
      </div>
    </header>
  );

  renderPlayerStatsFull = (player) => {
    if (this.state.loading === false && this.state.data) {
      const { playerStatistics = [] } = this.state.data;

      return (
        <Card
          title="Statistieken"
          className={`player-detail__stats`}
          hasTable={true}
        >
          <table className={`player-detail__stats__table`}>
            <thead>
              <tr>
                <th
                  className={`player-detail__column player-detail__column--string`}
                >
                  Team
                </th>
                <th
                  className={`player-detail__column player-detail__column--number show-for-medium`}
                >
                  <span title="Wedstrijden gespeeld">P</span>
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <span title="Wedstrijden gewonnen">W</span>
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <span title="Wedstrijden gelijkgespeeld">D</span>
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <span title="Wedstrijden verloren">L</span>
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <img
                    src={iconCardYellow}
                    title="Gele kaart"
                    alt="Gele kaart"
                    className="player-detail__stats--header_icon"
                  />
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <img
                    src={iconCardRed}
                    title="Rode kaart"
                    alt="Rode kaart"
                    className="player-detail__stats--header_icon"
                  />
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <img
                    src={iconGoal}
                    title="Doelpunt(en) gescoord"
                    alt="Doelpunt(en) gescoord"
                    className="player-detail__stats--header_icon"
                  />
                </th>
                <th
                  className={`player-detail__column player-detail__column--number  show-for-medium`}
                >
                  <img
                    src={iconCleansheet}
                    title="Cleansheets"
                    alt="Cleansheets"
                    className="player-detail__stats--header_icon"
                  />
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <span title="Minuten gespeeld">
                    <Icon icon="fa-clock-o" />
                  </span>
                </th>
              </tr>
            </thead>
            <tbody>
              {playerStatistics.map(function (stats) {
                return (
                  <tr>
                    <td
                      className={`player-detail__column player-detail__column--string`}
                    >
                      {stats.team.replace(`Voetbal : `, ``)}
                    </td>
                    <td
                      className={`player-detail__column player-detail__column--number show-for-medium`}
                    >
                      {stats.gamesPlayed}
                    </td>
                    <td
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {stats.gamesWon}
                    </td>
                    <td
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {stats.gamesEqual}
                    </td>
                    <td
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {stats.gamesLost}
                    </td>
                    <td
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {stats.yellowCards}
                    </td>
                    <td
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {stats.redCards}
                    </td>
                    <td
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {stats.goals}
                    </td>
                    <td
                      className={`player-detail__column player-detail__column--number show-for-medium`}
                    >
                      {stats.cleanSheets}
                    </td>
                    <td
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {stats.minutes}'
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      );
    }
  };
  renderPlayerGamesFull = () => {
    if (this.state.loading === false && this.state.data) {
      const { gameReports = [] } = this.state.data;

      return (
        <Card
          className={`player-detail__games`}
          title="Wedstrijden"
          hasTable={true}
        >
          <table
            className={`player-detail__games__table responsive-card-table`}
          >
            <thead>
              <tr>
                <th
                  className={`player-detail__column player-detail__column--string`}
                >
                  Team
                </th>
                <th
                  className={`player-detail__column player-detail__column--string`}
                >
                  Type
                </th>
                <th
                  className={`player-detail__column player-detail__column--string`}
                >
                  Datum
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <span title="Thuis/uit">H/A</span>
                </th>
                <th
                  className={`player-detail__column player-detail__column--score`}
                >
                  Score
                </th>
                <th
                  className={`player-detail__column player-detail__column--string`}
                >
                  Tegenstander
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <img
                    src={iconCardYellow}
                    title="Gele kaart"
                    alt="Gele kaart"
                    className="player-detail__stats--header_icon"
                  />
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <img
                    src={iconCardRed}
                    title="Rode kaart"
                    alt="Rode kaart"
                    className="player-detail__stats--header_icon"
                  />
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <img
                    src={iconGoal}
                    title="Doelpunten gescoord"
                    alt="Rode kaart"
                    className="player-detail__stats--header_icon"
                  />
                </th>
                <th
                  className={`player-detail__column player-detail__column--number`}
                >
                  <span title="Minuten gespeeld">
                    <Icon icon="fa-clock-o" />
                  </span>
                </th>
              </tr>
            </thead>
            <tbody>
              {gameReports.map(function (game) {
                return (
                  <tr>
                    <td
                      data-label="Team"
                      className={`player-detail__column player-detail__column--string`}
                    >
                      {game.team.replace(`Voetbal : `, ``)}
                    </td>
                    <td
                      data-label="Type"
                      className={`player-detail__column player-detail__column--string`}
                    >
                      {game.competition}
                    </td>
                    <td
                      data-label="Datum"
                      className={`player-detail__column player-detail__column--string`}
                    >
                      {moment(game.date).format(`DD/MM/YYYY`)}
                    </td>
                    <td
                      data-label="Thuis/uit"
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {game.home ? (
                        <span
                          className={`player-detail__games__home`}
                          title="Thuiswedstrijd"
                        >
                          <Icon icon="fa-home" alt="Thuiswedstrijd" />
                        </span>
                      ) : (
                        <span
                          className={`player-detail__games__away`}
                          title="Uitwedstrijd"
                        >
                          <Icon icon="fa-bus" alt="Uitwedstrijd" />
                        </span>
                      )}
                    </td>
                    <td
                      data-label="Score"
                      className={`player-detail__column player-detail__column--score`}
                    >
                      {game.goalsHomeTeam}&nbsp;-&nbsp;{game.goalsAwayTeam}
                    </td>
                    <td
                      data-label="Tegenstander"
                      className={`player-detail__column player-detail__column--string`}
                    >
                      {game.opponent}
                    </td>
                    <td
                      data-label="Gele kaart(en)"
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {game.yellowCards}
                    </td>
                    <td
                      data-label="Rode kaart(en)"
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {game.redCards}
                    </td>
                    <td
                      data-label="Doelpunten"
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {game.goals}
                    </td>
                    <td
                      data-label="Speeltijd"
                      className={`player-detail__column player-detail__column--number`}
                    >
                      {game.minutesPlayed}'
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      );
    }
  };

  renderPlayerBirthdate = (player) => (
    <div
      className={`player-detail__data-item player-detail__data-item--birthdate`}
    >
      <span className={`player-detail__data-item__label`}>Geboortedatum</span>
      <span className={`player-detail__data-item__data`}>
        {player.field_birth_date || `Onbekend`}
      </span>
    </div>
  );
  renderPlayerPosition = (player) => (
    <div
      className={`player-detail__data-item player-detail__data-item--position`}
    >
      <span className={`player-detail__date-item__data`}>
        {player.field_position && mapPositionCode(player.field_position)}
      </span>
      <span className={`player-detail__data-item__label`}>
        {player.relationships.node__team && (
          <Link to={player.relationships.node__team[0].path.alias}>
            {player.relationships.node__team[0].title}
          </Link>
        )}
      </span>
    </div>
  );
  renderPlayerJoinDate = (player) => {
    const currentlyPlaying = !player.field_date_leave;
    return (
      <div
        className={`player-detail__data-item player-detail__data-item--joindate`}
      >
        <span className={`player-detail__data-item__label`}>
          {currentlyPlaying && `Speler bij KCVV sinds`}
          {!currentlyPlaying && `Speler tussen`}
        </span>
        <span className={`player-detail__data-item__data`}>
          {player.field_join_date || `Onbekend`}
          {!currentlyPlaying && (
            <Fragment>
              <span className={`text--regular`}> en </span>{" "}
              {player.field_date_leave}
            </Fragment>
          )}
        </span>
      </div>
    );
  };

  render() {
    const { player } = this.props;

    const team = player.relationships.node__team || [];
    const articles = player.relationships.node__article || [];

    return (
      <Fragment>
        <article className={`player-detail`}>
          {this.renderPlayerData(player)}
          {this.renderPlayerBody(player)}
          {this.renderPlayerStatsFull(player)}
          {this.renderPlayerGamesFull(player)}
        </article>

        {(team || articles) && (
          <RelatedNews items={team.concat(articles)} limit={6} />
        )}
      </Fragment>
    );
  }
}

// Retrieve endpoint of the logo's api from the site metadata (gatsby-config.js).
const query = graphql`
  query {
    site {
      siteMetadata {
        kcvvPsdApi
      }
    }
  }
`;

export default ({ player }) => (
  <StaticQuery
    query={query}
    render={(data) => (
      <PlayerDetail
        // Data is the result of our query.
        config={data}
        player={player}
      />
    )}
  />
);


1			import { StaticQuery, graphql } from "gatsby";
2			import { Link } from "gatsby";
3			import { getSrc } from "gatsby-plugin-image";
4			import moment from "moment";
5			import React, { Component, Fragment } from "react";
6
7			import Icon from "../components/Icon";
8			import RelatedNews from "../components/RelatedNews";
9			import iconCardRed from "../images/i_card_red.png";
10			import iconCardYellow from "../images/i_card_yellow.png";
11			import iconCleansheet from "../images/i_cleansheet.png";
12			import iconGoal from "../images/i_goal.png";
13			import { mapPositionCode } from "../scripts/helper";
14			import Card from "./Card";
15			import "./player.scss";
16
17			// eslint-disable-next-line
18			String.prototype.replaceAll = function (search, replacement) {
19			// eslint-disable-next-line @typescript-eslint/no-this-alias
20			var target = this;
21			return target.replace(new RegExp(search, `g`), replacement);
22			};
23
24			/**
25			*/
26			class PlayerDetail extends Component {
27			constructor(props) {
28			super(props);
29
30			this.state = {
31			data: [],
32			loading: true,
33			};
34
35			const {
36			config: {
37			site: {
38			siteMetadata: { kcvvPsdApi },
39			},
40			},
41			player: { field_vv_id: playerId },
42			} = this.props;
43
44			this.kcvvPsdApi = kcvvPsdApi;
45			this.playerId = playerId;
46			}
47
48			updateData() {
49			if (this.playerId === null) {
50			return;
51			}
52
53			const apiUrl = `${this.kcvvPsdApi}/stats/player/${this.playerId}`;
54
55			fetch(apiUrl)
56			.then((response) => response.json())
57			.then((json) => this.setState({ data: json, loading: false }))
58			.catch(() => this.setState({ data: {}, loading: false }));
59			}
60
61			componentDidMount() {
62			this.updateData();
63			}
64
65			renderPlayerName = (player) => (
66			<h1 className={`player-detail__name`}>
67			<span className={`player-detail__name-first`}>
68			{player.field_firstname}
69			</span>
70			<span className={`player-detail__name-last`}>
71			{player.field_lastname}
72			</span>
73			</h1>
74			);
75			renderPlayerImage = (player) => (
76			<div className={`bg-green-mask`}>
77			<div
78			className={`player-detail__bg-avatar`}
79			style={
80			player.relationships.field_image && {
81			backgroundImage: `url(${getSrc(
82			player.relationships.field_image.localFile.childImageSharp
83			.gatsbyImageData,
84			)})`,
85			}
86			}
87			/>
88			<div className={`bg-white-end`} />
89			</div>
90			);
91			renderPlayerHeader = (player) => (
92			<header className={`player-detail__header`}>
93			{this.renderPlayerName(player)}
94			{this.renderPlayerImage(player)}
95
96			<div className={`player-detail__bg-shirt-number`} aria-hidden="true">
97			{player.field_shirtnumber \|\| ``}
98			</div>
99			</header>
100			);
101
102			renderPlayerStatsFull = (player) => {
103			if (this.state.loading === false && this.state.data) {
104			const { playerStatistics = [] } = this.state.data;
105
106			return (
107			<Card
108			title="Statistieken"
109			className={`player-detail__stats`}
110			hasTable={true}
111			>
112			<table className={`player-detail__stats__table`}>
113			<thead>
114			<tr>
115			<th
116			className={`player-detail__column player-detail__column--string`}
117			>
118			Team
119			</th>
120			<th
121			className={`player-detail__column player-detail__column--number show-for-medium`}
122			>
123			<span title="Wedstrijden gespeeld">P</span>
124			</th>
125			<th
126			className={`player-detail__column player-detail__column--number`}
127			>
128			<span title="Wedstrijden gewonnen">W</span>
129			</th>
130			<th
131			className={`player-detail__column player-detail__column--number`}
132			>
133			<span title="Wedstrijden gelijkgespeeld">D</span>
134			</th>
135			<th
136			className={`player-detail__column player-detail__column--number`}
137			>
138			<span title="Wedstrijden verloren">L</span>
139			</th>
140			<th
141			className={`player-detail__column player-detail__column--number`}
142			>
143			<img
144			src={iconCardYellow}
145			title="Gele kaart"
146			alt="Gele kaart"
147			className="player-detail__stats--header_icon"
148			/>
149			</th>
150			<th
151			className={`player-detail__column player-detail__column--number`}
152			>
153			<img
154			src={iconCardRed}
155			title="Rode kaart"
156			alt="Rode kaart"
157			className="player-detail__stats--header_icon"
158			/>
159			</th>
160			<th
161			className={`player-detail__column player-detail__column--number`}
162			>
163			<img
164			src={iconGoal}
165			title="Doelpunt(en) gescoord"
166			alt="Doelpunt(en) gescoord"
167			className="player-detail__stats--header_icon"
168			/>
169			</th>
170			<th
171			className={`player-detail__column player-detail__column--number show-for-medium`}
172			>
173			<img
174			src={iconCleansheet}
175			title="Cleansheets"
176			alt="Cleansheets"
177			className="player-detail__stats--header_icon"
178			/>
179			</th>
180			<th
181			className={`player-detail__column player-detail__column--number`}
182			>
183			<span title="Minuten gespeeld">
184			<Icon icon="fa-clock-o" />
185			</span>
186			</th>
187			</tr>
188			</thead>
189			<tbody>
190			{playerStatistics.map(function (stats) {
191			return (
192			<tr>
193			<td
194			className={`player-detail__column player-detail__column--string`}
195			>
196			{stats.team.replace(`Voetbal : `, ``)}
197			</td>
198			<td
199			className={`player-detail__column player-detail__column--number show-for-medium`}
200			>
201			{stats.gamesPlayed}
202			</td>
203			<td
204			className={`player-detail__column player-detail__column--number`}
205			>
206			{stats.gamesWon}
207			</td>
208			<td
209			className={`player-detail__column player-detail__column--number`}
210			>
211			{stats.gamesEqual}
212			</td>
213			<td
214			className={`player-detail__column player-detail__column--number`}
215			>
216			{stats.gamesLost}
217			</td>
218			<td
219			className={`player-detail__column player-detail__column--number`}
220			>
221			{stats.yellowCards}
222			</td>
223			<td
224			className={`player-detail__column player-detail__column--number`}
225			>
226			{stats.redCards}
227			</td>
228			<td
229			className={`player-detail__column player-detail__column--number`}
230			>
231			{stats.goals}
232			</td>
233			<td
234			className={`player-detail__column player-detail__column--number show-for-medium`}
235			>
236			{stats.cleanSheets}
237			</td>
238			<td
239			className={`player-detail__column player-detail__column--number`}
240			>
241			{stats.minutes}'
242			</td>
243			</tr>
244			);
245			})}
246			</tbody>
247			</table>
248			</Card>
249			);
250			}
251			};
252			renderPlayerGamesFull = () => {
253			if (this.state.loading === false && this.state.data) {
254			const { gameReports = [] } = this.state.data;
255
256			return (
257			<Card
258			className={`player-detail__games`}
259			title="Wedstrijden"
260			hasTable={true}
261			>
262			<table
263			className={`player-detail__games__table responsive-card-table`}
264			>
265			<thead>
266			<tr>
267			<th
268			className={`player-detail__column player-detail__column--string`}
269			>
270			Team
271			</th>
272			<th
273			className={`player-detail__column player-detail__column--string`}
274			>
275			Type
276			</th>
277			<th
278			className={`player-detail__column player-detail__column--string`}
279			>
280			Datum
281			</th>
282			<th
283			className={`player-detail__column player-detail__column--number`}
284			>
285			<span title="Thuis/uit">H/A</span>
286			</th>
287			<th
288			className={`player-detail__column player-detail__column--score`}
289			>
290			Score
291			</th>
292			<th
293			className={`player-detail__column player-detail__column--string`}
294			>
295			Tegenstander
296			</th>
297			<th
298			className={`player-detail__column player-detail__column--number`}
299			>
300			<img
301			src={iconCardYellow}
302			title="Gele kaart"
303			alt="Gele kaart"
304			className="player-detail__stats--header_icon"
305			/>
306			</th>
307			<th
308			className={`player-detail__column player-detail__column--number`}
309			>
310			<img
311			src={iconCardRed}
312			title="Rode kaart"
313			alt="Rode kaart"
314			className="player-detail__stats--header_icon"
315			/>
316			</th>
317			<th
318			className={`player-detail__column player-detail__column--number`}
319			>
320			<img
321			src={iconGoal}
322			title="Doelpunten gescoord"
323			alt="Rode kaart"
324			className="player-detail__stats--header_icon"
325			/>
326			</th>
327			<th
328			className={`player-detail__column player-detail__column--number`}
329			>
330			<span title="Minuten gespeeld">
331			<Icon icon="fa-clock-o" />
332			</span>
333			</th>
334			</tr>
335			</thead>
336			<tbody>
337			{gameReports.map(function (game) {
338			return (
339			<tr>
340			<td
341			data-label="Team"
342			className={`player-detail__column player-detail__column--string`}
343			>
344			{game.team.replace(`Voetbal : `, ``)}
345			</td>
346			<td
347			data-label="Type"
348			className={`player-detail__column player-detail__column--string`}
349			>
350			{game.competition}
351			</td>
352			<td
353			data-label="Datum"
354			className={`player-detail__column player-detail__column--string`}
355			>
356			{moment(game.date).format(`DD/MM/YYYY`)}
357			</td>
358			<td
359			data-label="Thuis/uit"
360			className={`player-detail__column player-detail__column--number`}
361			>
362			{game.home ? (
363			<span
364			className={`player-detail__games__home`}
365			title="Thuiswedstrijd"
366			>
367			<Icon icon="fa-home" alt="Thuiswedstrijd" />
368			</span>
369			) : (
370			<span
371			className={`player-detail__games__away`}
372			title="Uitwedstrijd"
373			>
374			<Icon icon="fa-bus" alt="Uitwedstrijd" />
375			</span>
376			)}
377			</td>
378			<td
379			data-label="Score"
380			className={`player-detail__column player-detail__column--score`}
381			>
382			{game.goalsHomeTeam} - {game.goalsAwayTeam}
383			</td>
384			<td
385			data-label="Tegenstander"
386			className={`player-detail__column player-detail__column--string`}
387			>
388			{game.opponent}
389			</td>
390			<td
391			data-label="Gele kaart(en)"
392			className={`player-detail__column player-detail__column--number`}
393			>
394			{game.yellowCards}
395			</td>
396			<td
397			data-label="Rode kaart(en)"
398			className={`player-detail__column player-detail__column--number`}
399			>
400			{game.redCards}
401			</td>
402			<td
403			data-label="Doelpunten"
404			className={`player-detail__column player-detail__column--number`}
405			>
406			{game.goals}
407			</td>
408			<td
409			data-label="Speeltijd"
410			className={`player-detail__column player-detail__column--number`}
411			>
412			{game.minutesPlayed}'
413			</td>
414			</tr>
415			);
416			})}
417			</tbody>
418			</table>
419			</Card>
420			);
421			}
422			};
423
424			renderPlayerBirthdate = (player) => (
425			<div
426			className={`player-detail__data-item player-detail__data-item--birthdate`}
427			>
428			<span className={`player-detail__data-item__label`}>Geboortedatum</span>
429			<span className={`player-detail__data-item__data`}>
430			{player.field_birth_date \|\| `Onbekend`}
431			</span>
432			</div>
433			);
434			renderPlayerPosition = (player) => (
435			<div
436			className={`player-detail__data-item player-detail__data-item--position`}
437			>
438			<span className={`player-detail__date-item__data`}>
439			{player.field_position && mapPositionCode(player.field_position)}
440			</span>
441			<span className={`player-detail__data-item__label`}>
442			{player.relationships.node__team && (
443			<Link to={player.relationships.node__team[0].path.alias}>
444			{player.relationships.node__team[0].title}
445			</Link>
446			)}
447			</span>
448			</div>
449			);
450			renderPlayerJoinDate = (player) => {
451			const currentlyPlaying = !player.field_date_leave;
452			return (
453			<div
454			className={`player-detail__data-item player-detail__data-item--joindate`}
455			>
456			<span className={`player-detail__data-item__label`}>
457			{currentlyPlaying && `Speler bij KCVV sinds`}
458			{!currentlyPlaying && `Speler tussen`}
459			</span>
460			<span className={`player-detail__data-item__data`}>
461			{player.field_join_date \|\| `Onbekend`}
462			{!currentlyPlaying && (
463			<Fragment>
464			<span className={`text--regular`}> en </span>{" "}
465			{player.field_date_leave}
466			</Fragment>
467			)}
468			</span>
469			</div>
470			);
471			};
472
473			render() {
474			const { player } = this.props;
475
476			const team = player.relationships.node__team \|\| [];
477			const articles = player.relationships.node__article \|\| [];
478
479			return (
480			<Fragment>
481			<article className={`player-detail`}>
482			{this.renderPlayerData(player)}
483			{this.renderPlayerBody(player)}
484			{this.renderPlayerStatsFull(player)}
485			{this.renderPlayerGamesFull(player)}
486			</article>
487
488			{(team \|\| articles) && (
489			<RelatedNews items={team.concat(articles)} limit={6} />
490			)}
491			</Fragment>
492			);
493			}
494			}
495
496			// Retrieve endpoint of the logo's api from the site metadata (gatsby-config.js).
497			const query = graphql`
498			query {
499			site {
500			siteMetadata {
501			kcvvPsdApi
502			}
503			}
504			}
505			`;
506
507			export default ({ player }) => (
508			<StaticQuery
509			query={query}
510			render={(data) => (
511			<PlayerDetail
512			// Data is the result of our query.
513			config={data}
514			player={player}
515			/>
516			)}
517			/>
518			);
519

soniCaH / KCVV-Elewijt-Gatsby

PlayerDetail.renderPlayerGamesFull B last analyzed 2025-10-24 04:38 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

PlayerDetail.renderPlayerGamesFull B
last analyzed 2025-10-24 04:38 UTC